<template>
  <a-modal v-model:visible="visible" @ok="handleOk">
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
    </template>
    <p>确认支付积分？</p>
  </a-modal>
  <div v-if="checkHas===true">
    <div class="cont_area">
      <div v-if="content.check" class="unlock">
        {{ content.mark }}
      </div>
      <div class="not_unlock" v-else>
        <div style="text-align: center;">
          此内容需要{{ content.num }}积分解锁
        </div>
        <div style="text-align: center;">
          <a @click="showModal">点击解锁</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {ref, reactive, defineComponent} from "vue";
import {get, put, post, tip, del} from "@/common";
import {message} from "ant-design-vue";

export default defineComponent({
  name: "UnlockCont",
  props: {
    postID: Number,
  },
  setup(props, {emit}) {
    const visible = ref(false);
    const content = ref({});
    const scoreEntity = reactive({
      postID: props.postID,
      userID: null,
      num: null,
      mark: null,
      isCheck: null
    })

    const getContent = () => {
      get("/score/integralContent", scoreEntity).then((res) => {
        content.value = res.data;
      })
    };
    getContent();

    const showModal = () => {
      visible.value = true;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    const handleOk = () => {
      visible.value = false;
      post("/score/unlock", scoreEntity).then((res) => {
        message.success('解锁成功!');
        getContent();
      })
    };

    const checkHas=ref({})
    const checkHasCont=()=>{
      get("/score/checkHasCont",scoreEntity).then((res)=>{
        checkHas.value=res.data;
      })
    };


    return {
      visible,
      content,
      checkHas,
      getContent,
      showModal,
      handleOk,
      handleCancel,
    };
  },

});
</script>

<style scoped>
.cont_area {
  width: 100%;
  height: 100%;
  margin: 10px;
  border-radius: 5px;
  background-color: lightyellow;
}

.not_unlock {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  background-color: lightyellow;
}

.unlock {
  width: 100%;
  height: 100%;
  min-height: 20px;
  background-color: lightyellow;
}
</style>